<template>
  <div class="jay-waterfall-wrapper" ref="container">
    <div class="jay-waterfall-item" v-for="(item,index) in list" :key="index">

      <div class="article-card">
        <div class="article-card-header">
          <img class="avatar" src="https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/da41a711ff47475ba973c3c19b3da700~300x300.image" alt="">
          <div>
            <span class="author">太子</span>
            <span class="divider">|</span>
            <span class="date">7小时前</span>
          </div>
        </div>
        <div class="article-card-title">
          Linux系列学习第六天——一步一步教会你如何使用Linux
        </div>
        <div class="article-content">
          茫茫人海千千万万，感谢这一秒你看到这里。 愿你在未来的日子，保持热爱，奔赴山海！ 希望我的Linux系列文章对你的学习有所帮助！
          茫茫人海千千万万，感谢这一秒你看到这里。 愿你在未来的日子，保持热爱，奔赴山海！ 希望我的Linux系列文章对你的学习有所帮助！
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  export default {
    name: "waterfall",
    data(){
      return {
        list:[
          "https://hbimg.huabanimg.com/d4896feed35a5c6002fdb62e274bae57ad3132221a3fa-P3XalW_fw236/format/webp",
          "https://hbimg.huabanimg.com/b875f6dc3a69c3dd80e351d69e8ea179f62817e691567-IH4fNI_fw236/format/webp",
          "https://hbimg.huabanimg.com/e4d48c4f7257e8c5c6731f6dd756b902f21bde6826d94-Xmy2Nh_fw236/format/webp",
          "https://hbimg.huabanimg.com/0544bf26df268ac2128be52df4eaf3ae71a663332f04e-gKeT1U_fw236/format/webp",
          "https://hbimg.huabanimg.com/fb0631a1992550d314718433b9651b8b12e03cfd156ff-gu0Ov9_fw236/format/webp",
          "https://hbimg.huabanimg.com/d4896feed35a5c6002fdb62e274bae57ad3132221a3fa-P3XalW_fw236/format/webp",
          "https://hbimg.huabanimg.com/d4896feed35a5c6002fdb62e274bae57ad3132221a3fa-P3XalW_fw236/format/webp",
          "https://hbimg.huabanimg.com/b875f6dc3a69c3dd80e351d69e8ea179f62817e691567-IH4fNI_fw236/format/webp",
          "https://hbimg.huabanimg.com/e4d48c4f7257e8c5c6731f6dd756b902f21bde6826d94-Xmy2Nh_fw236/format/webp",
          "https://hbimg.huabanimg.com/0544bf26df268ac2128be52df4eaf3ae71a663332f04e-gKeT1U_fw236/format/webp",
          "https://hbimg.huabanimg.com/fb0631a1992550d314718433b9651b8b12e03cfd156ff-gu0Ov9_fw236/format/webp",
          "https://hbimg.huabanimg.com/d4896feed35a5c6002fdb62e274bae57ad3132221a3fa-P3XalW_fw236/format/webp"
        ],
        gap: 10
      }
    },
    methods:{
      getContainerSize(){
        let container = this.$refs.container
        return {
          width: container.clientWidth,
          height: container.clientHeight
        }
      },
      init(){
        let items = document.getElementsByClassName('jay-waterfall-item')
        let containerSize = this.getContainerSize()
        let itemWidth = items[0].offsetWidth
        console.log("itemWidth",itemWidth)
        console.log('itemHeight',items[0].offsetHeight)
        console.log(containerSize)
        let columns =parseInt(containerSize.width / (itemWidth + this.gap)) || 1
        // 记录每个瀑布流元素的高度

        let arr = []
        for(let i = 0;i<items.length;i++){
          // 当处在第一行时
          if( i < columns){
            items[i].style.top = '0px'
            items[i].style.left = `${(itemWidth + this.gap) * i}px`
            arr.push(items[i].offsetHeight)
          }else{ // 当不处于第一行时，优先排列最低高度的元素

            let minHeight = arr[0]
            let index = 0
            // 寻找高度最低的元素，并记录它的下标
            for(let j = 0;j<arr.length;j++){
              if(minHeight > arr[j]){
                minHeight = arr[j]
                index = j
              }
            }

            // 当前元素的top
            items[i].style.top = `${arr[index] + this.gap}px`
            items[i].style.left = `${items[index].offsetLeft}px`

            arr[index] = arr[index] + items[i].offsetHeight + this.gap
          }
        }
      }
    },
    mounted() {
      this.init()
    }
  }
</script>

<style lang="scss">
  .jay-waterfall-wrapper{
    position: relative;
    width: 992px;
    height: 600px;
    min-width: 236px;
    overflow: scroll;

    .jay-waterfall-item{
      width: 236px;
      /*height: 300px;*/
      position: absolute;
    }
  }

  .article-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    /*background: aqua;*/
    box-shadow: 2px 2px 2px #999;
    border-radius: 14px;
    padding: 20px;
    font-family: "Microsoft YaHei UI", Avenir, Helvetica, Arial, sans-serif;

    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #cccccc;
      font-size: 16px;
      height: 40px;
      margin-bottom: 15px;

      .avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden;
      }

      .author {
        font-size: 16px;
      }

    }

    &-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    &-content {
      font-size: 18px;
    }
  }
  </style>